<template>
  <div class="wrapper">
    <v-head></v-head>
    <el-container style="color: #fff">
      <el-header> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;轨道交通是城市电气化交通网络的重要组成。北京地铁13号线于2002年9月28日开通，全长40.5千米，共设17座车站，采用6节编组准B型列车。根据2019年数据，13号线日均运送旅客69.83万人。在虚拟仿真实验中，先进入【能馈系统设置】界面，学习地铁系统能量回馈系统，并进行设置。完成设置后，在本界面调节【地铁系统运行时段】及【最高运行速度】，观察系统在不同工况下的可再生能量利用率，并选取最优最高限速设置。</el-header>
      <div class="header-tab">
        <div class="header-bar-item">
          <div class="header-bar-item-text">
            <div class="header-bar-item-text-item" v-for="name in allPeriods" :key="name">{{name}}</div>
          </div>
          <div class="header-bar-item-child">
            <el-slider
                v-model="periodIndex"
                :step="1"
                :max="allPeriods.length-1"
                :show-tooltip="false"
                @change="periodChange"
            >
            </el-slider>
          </div>
        </div>
        <div class="header-bar-item">
          <div class="header-bar-item-text">
            <div class="header-bar-item-text-item" v-for="name in allSpeeds" :key="name">{{name}}km/h</div>
          </div>
          <div class="header-bar-item-child">
            <el-slider
                v-model="speedIndex"
                :step="1"
                :max="allSpeeds.length-1"
                :show-tooltip="false"
                @change="speedChange"
            >
            </el-slider>
          </div>
        </div>
      </div>
      <el-main>
        <div class="metro-wrapper">
          <MetroTrain class="three-d" :speed="Number(speed)" :trainNumber="trainNumber"/>
        </div>
      </el-main>
      <div class="footer">
        <el-button id="button-back" size="small" @click="goBack()">返回上一层</el-button>
        <el-button id="button-settings" size="small" @click="jumpToMetroExperiment">能馈系统设置</el-button>
        <el-tag id="rate" type="info">可再生能量利用率：{{ rate() }} %</el-tag>
      </div>
    </el-container>
  </div>
</template>

<script>
  import vHead from './Header.vue';
  import MetroTrain from './MetroTrain.vue'
  import MetroPainter from '../../assets/js/MetroPainter';
  import metroData from '../../assets/json/metro.json';

  export default {
    components: {
      vHead,
      MetroTrain
    },
    data() {
      return {
        allPeriods: ['低谷时段', '正常时段', '高峰时段'],
        period: '正常时段',
        periodIndex: 1,
        speed: '80',
        speedIndex: 3,
        rateMap: {
          '低谷时段': {
            '60': '39.20',
            '70': '35.70',
            '80': '35.95'
          },
          '正常时段': {
            '60': '35.95',
            '65': '39.68',
            '70': '46.23',
            '80': '40.80'
          },
          '高峰时段': {
            '70': '45.51',
            '80': '46.86'
          }
        },
        trainNumberMap: {
          '低谷时段': 10,
          '正常时段': 17,
          '高峰时段': 23
        }
      };
    },
    computed: {
      // 根据【运行时段】的不同，显示不同的【最高限速】列表
      allSpeeds() {
        return Object.keys(this.rateMap[this.period])
      },
      // 能馈系统是否切入
      isEnergyFeedbackEnabled() {
        return this.$store.state.isEnergyFeedbackEnabled
      },
      // 列车数量
      trainNumber() {
        return this.trainNumberMap[this.period]
      }
    },
    watch: {
      period(val) {
        const allSpeeds = this.allSpeeds;
        if (allSpeeds.indexOf(this.speed) === -1) {
          this.speed = allSpeeds[0]
          this.speedIndex = 0
        } else {
          this.speedIndex = allSpeeds.indexOf(this.speed)
        }
      }
    },
    mounted() {
      // 可再生能量利用率查找表
      this.rateMap = {
        '低谷时段': {
          '60': '39.20',
          '70': '35.70',
          '80': '35.95'
        },
        '正常时段': {
          '60': '35.95',
          '65': '39.68',
          '70': '46.23',
          '80': '40.80'
        },
        '高峰时段': {
          '70': '45.51',
          '80': '46.86'
        }
      }
    },
    methods: {
      // 可再生能量利用率
      rate() {
        if (!this.isEnergyFeedbackEnabled) {
          return '0'
        }
        return this.rateMap[this.period][this.speed];
      },
      jumpToMetroExperiment() {
        this.$router.push('/metroExperiment');
      },
      goBack() {
        this.$router.go(-1)
      },
      periodChange(index) {
        this.period = this.allPeriods[index]
        const allSpeeds = this.allSpeeds;
        if (allSpeeds.indexOf(this.speed) === -1) {
          this.speed = allSpeeds[0]
          this.speedIndex = 0
        }
      },
      speedChange(index) {
        this.speed = this.allSpeeds[index]
      }
    }
  }
</script>
<style lang="less">
  .el-form > .el-form-item > .el-form-item__label {
    color: white;
  }
</style>
<style lang="less" scoped="scoped">
  body .wrapper {
    background-image: url(../../assets/img/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .el-header {
    margin: 50px auto 0 auto;
    width: 90%;
    color: #00ffff;
    line-height: 32px;
    font-size: 18px;
    height: 100px !important;
    background-image: url(../../assets/img/carExper/content.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	display: flex;
	align-items: center; /*定义body的元素垂直居中*/
	justify-content: center;
  }

  .el-container {
    width: 100%;
    height: 92%;
    background-image: url(../../assets/img/metroExper/background.png);
    background-size: 99% 100%;
    margin-left: 15px;
    background-repeat: no-repeat;
    position: relative;

    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background: url("../../assets/img/metroExper/motro_exper_bg.png") no-repeat center center/90% auto;
    }
  }

  .el-main {
    width: calc(100% - 35px);
    padding: 0;
    position: relative;
    overflow-x: hidden;

    .metro-wrapper{
      width: 780px;
      height: 300px;
      margin: 0 auto;
      perspective: 550px;
      perspective-origin: 50% 60%;
    }

    .three-d {
      transform-style: preserve-3d;
      transform: translate(0%, -24%) rotateX(33deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
  }

  .header-tab {
    margin-right: 85px;
    margin-left: 50px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;

    .header-bar-item {
      width: 50%;
      min-width: 360px;

      .header-bar-item-child {
        margin: 0 auto;
        width: 360px;
        height: 38px;
        background: url("../../assets/img/metroExper/tabbar_bg.png") no-repeat center center/360px 21px;

        /deep/
        .el-slider {
          padding: 0 40px;

          .el-slider__runway {
            background: transparent;

            .el-slider__bar {
              background: transparent;
            }

            .el-slider__button-wrapper {
              top: -8px;
            }

            .el-slider__button {
              width: 28px;
              height: 40px;
              background: red;
              border: none;
              background: url("../../assets/img/metroExper/indicator.png") no-repeat center/100%;
            }
          }
        }
      }

      .header-bar-item-text {
        margin: 0 auto;
        width: 340px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        line-height: 1;
        font-size: 14px;
        color: #00ffff;

        .header-bar-item-text-item {
          text-align: center;
        }
      }
    }
  }

  .footer {
    position: absolute;
    right: 60px;
    bottom: 80px;

    #rate {
      width: 180px;
      height: 31px;
      background: url("../../assets/img/metroExper/metro_exper_tag_bg.png") no-repeat center/100%;
      border: none;
      text-align: center;
      line-height: 31px;
      color: #00ffff;
      margin-left: 10px;
    }

    .el-button.el-button--default.el-button--small,
    .el-button.el-button--primary.el-button--small {
      width: 116px;
      height: 31px;
      background-image: url(../../assets/img/button_blue.png);
      background-size: 100% 100%;
      border: none;
      color: rgb(178, 235, 248);
      background-color: transparent;
    }

    .el-button.el-button--default.el-button--small:hover,
    .el-button.el-button--primary.el-button--small:hover {
      background-image: url(../../assets/img/button_red.png);
    }
  }


</style>
